<template>
  <d2-container>
    <el-card shadow="never" class="d2-mb titleline">
      <template slot="header" style="height:66px;">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">我的消息</p>
      </template>
      <el-form
        class="filter-container"
        ref="egForm"
        :model="egForm"
        label-width="70px"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="日期">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  v-model="egForm.startDate"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
              <el-col class="line tc" :span="2">~</el-col>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  v-model="egForm.endDate"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否已读">
              <el-select v-model="egForm.is_read" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="消息标题">
              <el-input
                placeholder="请输入内容"
                v-model="egForm.title"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="消息内容">
              <el-input
                placeholder="请输入内容"
                v-model="egForm.content"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="margin-top:4px;">
            <el-button type="primary" @click="chax" size="small">
              <d2-icon name="search" /> 查询
            </el-button>
          </el-col>
          <el-col :span="2" style="margin-top:4px;">
            <el-button
              type="primary"
              @click="ydu"
              icon="el-icon-check"
              size="small"
              >已读
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="multipleriskTj"
        :data="riskTjListData"
        highlight-current-row
        @current-change="handleCurrentChange"
        border
        fit
        class="bra"
        style="width: 100%;margin-top:20px;"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{
          background: '#eef1f6',
          'text-align': 'center',
          color: '#606266'
        }"
      >
        <el-table-column label="发送日期" sortable width="155">
          <template slot-scope="scope">
            {{ scope.row.created_time | dateYMDHMSFormat_ss }}
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="消息标题"
          width="90"
        ></el-table-column>
        <el-table-column prop="content" label="消息内容"></el-table-column>
        <el-table-column prop="content" label="是否已读" sortable width="110">
          <template slot-scope="scope">
            {{ scope.row.is_read == 0 ? "未读" : "已读" }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handlePaginationChange"
        :current-page="egForm.p"
        :page-size="egForm.pageSize"
        layout="total, prev, pager, next"
        :total="egForm.count"
      >
      </el-pagination>
    </el-card>
  </d2-container>
</template>

<script>
import { getStation_msg_list, station_msg } from "@/api/url";
export default {
  data() {
    return {
      options: [
        {
          value: 0,
          label: "未读"
        },
        {
          value: 1,
          label: "已读"
        }
      ],
      value: "",
      egForm: {
        title: "",
        content: "",
        startDate: "",
        endDate: "",
        creator: "",
        send_user: "",
        is_send: "",
        is_read: "",
        is_cus_insert: "",
        own_flag: 1,
        count: 0,
        p: 1,
        pageSize: 20
      },
      riskTjListData: [],
      currentRow: null
    };
  },
  created() {
    this.selectData();
  },
  methods: {
    selectData() {
      getStation_msg_list(this.egForm).then(res => {
        this.riskTjListData = res.result.results;
        this.egForm.count = res.result.count;
      });
    },
    ydu() {
      if (this.currentRow == null) {
        this.$message({
          message: "请先选择消息",
          type: "warning"
        });
        return;
      }
      var datas = {
        operation: "MOD",
        id: this.currentRow.id,
        is_read: 1,
        title: this.currentRow.title
      };
      station_msg(datas).then(res => {
        console.log(res);
        this.selectData();
      });
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    chax() {
      this.egForm.p = 1;
      this.selectData();
    },
    handlePaginationChange(val) {
      this.egForm.p = val;
      this.selectData();
    }
  }
};
</script>
